<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        /*
            块元素在文档流中默认是垂直排列，所以这三个div自上而下依次排列，如果希望块元素在页面上水平排列，可以使块元素脱离文档流。

            使用float来使块元素浮动，从而脱离文档流
                可选值：
                none:默认值，元素默认在文档流中排列
                left：元素会立即脱离文档流，向页面的左侧浮动
                right：元素会立即脱离文档流，向页面的右侧浮动

           当为一个元素设置浮动后（float属性值不为none值），元素会立即脱离文档流，元素脱离文档流以后，它下面的元素会立即向上移动,元素浮动以后，
           会尽量向页面的左上或者又上漂浮，直到遇到父元素的边框或者其他的浮动元素。

           如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

           浮动元素不会超过它上边的兄弟元素，最多最多一边齐


        */
        .box1 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            float: left;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }
        .box4 {
            background-color: blue;
            width: 200px;
            height: 200px;

            /*
                浮动的元素不会盖住文字，文字会自动环绕在元素的周围，所以我们可以通过浮动来设置一个文字环绕图片额效果
            */
            float: left;
        }
        .p1 {
            background-color: coral;
        }

        /*
            在文档流中，子元素的宽度默认占父元素的全部
            当元素设置了浮动以后，元素会完全脱离文档流，块元素脱离文档流以后，高度和宽度都是被内容撑开的。

            内联元素脱离文档流以后会自动变成块元素，换句话说就是，一旦元素脱离文档流以后就全部变成了块元素。
        */
    </style>
</head>
<body>
   <!-- <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>-->

    <!--浮动2-->
    <div class="box4"></div>
    <p class="p1">
        锦鲤的发展同金鱼有着相似之处。中国自古也有“鲤鱼跳龙门”之说，喻人飞黄腾达，官运亨通。其实早期锦鲤只是皇家王宫贵族和达官显赫等家庭的观赏鱼，后来，锦鲤在民间流传开来，人们则把它看成吉祥、幸福的象征。在古代中国，通常还是官宦富人之家池内之物。锦鲤最早见于中国西晋时期的记载。中国古代宫廷最少从唐代开始就已经有大规模养殖锦鲤的纪录，距今已有1000多年历史，金鱼和锦鲫则有1400多年的历史。
    </p>
</body>
</html>